<template>
    <section class="welcom_page">
        <div class="content">
            <el-card class="main_top">
                <div class="main_top_user">
                    <span>{{ getTimeState() }}</span>
                    <span>{{ userInfo?.base_info?.user_name }}</span>
                </div>
                <div class="user_count">
                    你企业的客户总人数已达
                    <span>{{ formatStatisticsData(basicData.cust_sum) }}</span> 人，客户群总人数已达
                    <span>{{ formatStatisticsData(basicData.group_members_sum) }}</span> 人
                </div>
            </el-card>
            <BasicData :basic-data="basicData"></BasicData>
            <StatisticsSearch :options="statisOptions" @submit="onSubmit" />

            <el-card class="box_card">
                <div class="box_card_tit"><strong>客户趋势图</strong></div>
                <div class="cust_qs">
                    <el-radio-group v-model="custId">
                        <el-radio-button :label="1">新增客户总数</el-radio-button>
                        <el-radio-button :label="2">新增企微客户数</el-radio-button>
                        <el-radio-button :label="5">流失客户数</el-radio-button>
                    </el-radio-group>
                </div>
                <div v-if="isShoweCharts" ref="cahrtLineRef" class="chart_line"></div>
                <div v-if="!isShoweCharts" class="no_data">
                    <img class="no_img" src="@/assets/noData.png" alt="" />
                    <div class="emty_title">暂无数据</div>
                </div>
            </el-card>
            <el-card class="box_card">
                <div class="box_card_tit"><strong>快捷入口</strong></div>
                <el-row :gutter="16" class="menu_list">
                    <el-col
                        v-for="item in menuListData"
                        :key="item.id"
                        :span="3"
                        class="menu_item"
                        @click="jump2Fn(item.path)">
                        <div class="menu_color">
                            <el-image style="width: 48px; height: 48px" class="menu_item_icon" :src="item.url">
                            </el-image>
                            <div class="menu_item_name">{{ item.name }}</div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="r_side_bar">
            <div class="r_side_top">
                <div class="company_name">
                    <div class="name_detail">{{ corpName || userInfo?.tenant_info?.company_name }}</div>
                </div>
                <div class="compay_info">
                    <div class="company_main">
                        <div class="compay_verison mb16">
                            <div class="mb_title">当前版本：</div>
                            <div v-if="userInfo?.base_info?.package_name.length <= 4" class="compay_version_name">
                                {{ userInfo?.base_info?.package_name }}
                            </div>
                            <el-tooltip
                                v-else
                                class="box-item"
                                effect="dark"
                                :content="userInfo?.base_info?.package_name"
                                placement="top-start">
                                <div class="compay_version_name">{{ userInfo?.base_info?.package_name }}</div>
                            </el-tooltip>
                        </div>
                        <div class="compay_verison">
                            到期时间：<span>{{ userInfo?.base_info?.package_expire_time.split(' ')[0] }}</span>
                        </div>
                    </div>
                    <el-button type="primary" class="up_btn" @click="changePackage = true">立即升级</el-button>
                </div>
                <div class="company_bottom">
                    <div class="company_days">
                        <div class="more_days">剩余</div>
                        <div class="days">
                            <span>{{ vipDays || 0 }}</span> 天
                        </div>
                    </div>
                    <div class="company_days">
                        <div class="more_days">子账号数</div>
                        <div class="days">
                            <span>{{ userInfo?.tenant_info?.current_account_count || 0 }}</span> /
                            {{ userInfo?.tenant_info?.sub_account_limit || 0 }}
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="false" class="r_side_process">
                <div class="process_tit">员工动态</div>
                <el-scrollbar class="process_height">
                    <ul class="staff_active">
                        <li v-for="(item, index) in 5" :key="index" class="staff_active_item">
                            <div class="staff_icon">
                                <div class="circle_icon"></div>
                            </div>
                            <div class="staff_main">
                                <div class="staff_do">
                                    <span class="font_bold">【{{ '新建文本素材' }}】</span>
                                    <span class="staff_name">我那个</span>
                                    新建问别人
                                </div>
                                <div class="staff_time">20:89</div>
                            </div>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
        </div>
        <!-- 扫描企微顾问，申请立即升级 -->
        <el-dialog v-model="changePackage" title="企业专属顾问" width="300" center>
            <img style="width: 100%" src="https://static.scrm.keyid.cn/assets/images/global/service.png" alt="" />
            <p>扫描企微顾问，申请立即升级</p>
        </el-dialog>
    </section>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, inject, watch, onMounted, computed } from 'vue';
import BasicData from './components/BasicData.vue';
import { groupBasicInfo, cusStatBasicInfo, cusLineInfo } from '@/api/customerCenter';
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue';

import { v401 } from '@/api/home';
import router from '@/router';
import { getTimeState } from '@/utils/utils';
import { useCheckReal } from '@/utils/utils';
import { useStore } from '@/store';
import { cloneDeep } from 'lodash';
import { formatStatisticsData } from '@/utils/utils';
import dayjs from 'dayjs';

const store = useStore();
const echarts = inject('ec');
const cahrtLineRef = ref(null);
const searchRef = ref(null);
const basicData = ref({});
const userInfo = ref({});
const custInfo = ref({});
const groupInfo = ref({});
const changePackage = ref(false);
const isShoweCharts = ref(false);
const custId = ref(1);
const vipDays = ref(0);
const menuList = reactive([
    { id: 0, name: '客户群发', url: '/static/welcome/img (16).png', path: '/channel/managetomass/customergroup' },
    { id: 1, name: '抽奖引流', url: '/static/welcome/img (17).png', path: '/smartMarketing/drainage/luckyDraw' },
    { id: 2, name: '客户列表', url: '/static/welcome/img (14).png', path: '/customer/manage/list' },
    { id: 3, name: '员工红包', url: '/static/welcome/img (2).png', path: '/smartMarketing/employeered/redrecord' },
    { id: 4, name: '好友欢迎语', url: '/static/welcome/img (3).png', path: '/channel/qwbasicoperation/welcomefriend' },
    { id: 5, name: '裂变引流', url: '/static/welcome/img (4).png', path: '/smartMarketing/fission/fissionDrainage' },
    { id: 6, name: '群裂变', url: '/static/welcome/img (15).png', path: '/smartMarketing/drainage/groupFission' },
    { id: 7, name: '渠道活码', url: '/static/welcome/img (13).png', path: '/smartMarketing/drainage/channelCode' },
    { id: 8, name: '自动拉群', url: '/static/welcome/img (11).png', path: '/customer/groupManage/autopullgroup' },
    { id: 9, name: '标签规则', url: '/static/welcome/img (12).png', path: '/customer/tag/rules' },
    {
        id: 10,
        name: '客户SOP',
        url: '/static/welcome/img (5).png',
        path: '/smartMarketing/marketAutomation/customerSop'
    },
    {
        id: 11,
        name: '客户群SOP',
        url: '/static/welcome/img (6).png',
        path: '/smartMarketing/marketAutomation/customerBaseSop'
    },
    { id: 12, name: '员工任务', url: '/static/welcome/img (7).png', path: '/employee/employeetasks/taskmanage' },
    { id: 13, name: '商机管理', url: '/static/welcome/img (8).png', path: '/salesleads/salesmanagement/business' },
    { id: 14, name: '群活码', url: '/static/welcome/img (9).png', path: '/smartMarketing/drainage/groupCode' },
    { id: 15, name: '收集表', url: '/static/welcome/img (10).png', path: '/content/highMaterial/collectionTable' }
]);
const corpName = ref<string>('');

const statisOptions = reactive([
    {
        label: '时间筛选',
        type: 'dateFilter'
    },
    {
        label: '选择员工',
        type: 'depart',
        // key: 'departkey',
        userKey: 'depart',
        popperClass: 'zw-hide_select_option',
        departmentKey: 'departments',
        placeholder: '选择员工',
        multiple: true,
        isMember: false
    }
]);

const onSubmit = (data: any) => {
    params.screen_time = data.times;
    params.departments = data.departments;
    params.users = data.depart;
    nextTick(() => {
        getLineInfo(params);
    });
};
const menuListData = computed(() => {
    // 是否地产用户
    const isReal = useCheckReal();
    if (isReal) {
        return menuList.filter(v => v.id !== 13);
    } else {
        return menuList;
    }
});
const xData = ref([]);
const yData = ref([]);
const onTooltip = (type: number): string => {
    let res = '';
    switch (type) {
        case 1:
            res = '新增客户总数';
            break;
        case 2:
            res = '新增企微客户数';
            break;
        case 5:
            res = '流失客户数';
            break;
    }
    return res;
};
const getEchart = () => {
    const myChart_one = echarts.init(cahrtLineRef.value);
    const chartOption = reactive({
        color: ['#FF6B00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    show: false
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData.value
        },
        yAxis: {
            type: 'value',
            name: '人数',
            nameTextStyle: {
                verticalAlign: 'bottom',
                align: 'right'
            },
            axisLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        grid: {
            top: 40,
            bottom: 20,
            left: 36,
            right: 40,
            containLabel: true
        },
        series: [
            {
                name: onTooltip(custId.value),
                data: yData.value,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#F8DCD1' },
                            { offset: 0.5, color: '#FDF8F6' },
                            { offset: 1, color: '#FFFAF9' }
                        ])
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        color: '#FF9D23'
                    }
                },
                emphasis: {
                    // 鼠标 hover 时的样式
                    itemStyle: {
                        color: '#FF9D23', // hover 圆点颜色
                        borderColor: '#FF9D23', // hover 圆点边框颜色
                        borderWidth: 8
                    }
                }
            }
        ]
    });
    myChart_one.setOption(chartOption);
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
// 收集的表单数据
const params = reactive({
    departments: [],
    screen_time: [],
    users: [],
    source: custId.value
});
const timeData = ref({
    start_time: '',
    end_time: ''
});
const haha = () => {
    v401();
};
onMounted(() => {
    // getLineInfo(params)
    // 获取账号信息/客户群统计/客户群群统计
    Promise.all([groupBasicInfo(), cusStatBasicInfo()]).then((res: Array<any>) => {
        const userInfo_ = cloneDeep(store.getters['user/getAccountInfo']);
        const data =
            dayjs(userInfo_.base_info.package_expire_time).valueOf() -
            dayjs(userInfo_.base_info.package_current_time).valueOf();
        if (data > 0) {
            vipDays.value = Math.floor(data / 1000 / 24 / 60 / 60);
        } else {
            vipDays.value = 0;
        }
        corpName.value = store.getters['user/getCurrentCorpName'];
        userInfo.value = userInfo_;
        groupInfo.value = res[0];
        custInfo.value = res[1];
        basicData.value = {
            // 客户群
            today_new_sum: res[0].today_new_sum,
            today_lost_sum: res[0].today_lost_sum,
            group_members_sum: res[0].group_members_sum,
            group_sum: res[0].group_sum,
            // 客户
            cust_sum: res[1].sum,
            today_new_customers: res[1].today_new_customers,
            today_lost_customers: res[1].today_lost_customers
        };
    });
});
const jump2Fn = (val: string) => {
    router.push({ path: val });
};
// 获取折线图数据
const getLineInfo = (params: any) => {
    xData.value = [];
    yData.value = [];
    if (!params.source) {
        params = { ...params, source: custId.value };
        delete params.currentId;
        timeData.value.start_time = params.start_time;
        timeData.value.end_time = params.end_time;
    } else {
        params.start_time = timeData.value.start_time ? timeData.value.start_time : params.start_time;
        params.end_time = timeData.value.end_time ? timeData.value.end_time : params.end_time;
    }
    cusLineInfo(params).then((data: any) => {
        data = Array.isArray(data) ? data : data.data;
        if (data.length > 0) {
            isShoweCharts.value = true;
            data.forEach((item: any) => {
                xData.value.push(item.date);
                yData.value.push(item.num);
            });
            nextTick(() => {
                getEchart();
            });
        } else {
            isShoweCharts.value = false;
        }
    });
};
watch(custId, val => {
    params.source = val;
    // params.departments = searchRef.value.form.departments
    getLineInfo(params);
});
</script>
<style lang="scss" scoped>
:deep(.el-card.is-always-shadow) {
    box-shadow: none;
}

.welcom_page {
    display: flex;

    :deep(.el-dialog__body) {
        text-align: center;
    }

    .content {
        overflow: hidden;
        flex: 1;
        width: 100%;

        .main_top {
            width: 100%;

            .main_top_user {
                font-size: 20px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
            }

            .user_count {
                margin-top: 18px;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;

                span {
                    font-size: 16px;
                    color: #ff6b00;
                }
            }
        }

        .box_card {
            margin-top: 15px;
            width: 100%;

            .box_card_tit {
                font-size: 16px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                padding-bottom: 17px;
                border-bottom: 1px solid #eaeaea;
            }

            .menu_list {
                margin-top: 24px;
                display: flex;
                flex-wrap: wrap;

                .menu_item {
                    box-sizing: border-box;

                    .menu_color {
                        padding: 16px 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        cursor: pointer;

                        .menu_item_icon {
                            width: 48px;
                            height: 48px;
                            margin-bottom: 16px;
                        }

                        .menu_item_name {
                            font-size: 16px;
                            font-weight: 400;
                            color: #1a1918;
                            line-height: 16px;
                            letter-spacing: 1px;
                            white-space: pre;
                        }

                        &:hover {
                            background: #f5f5f5;
                            border-radius: 4px;
                        }
                    }
                }

                .menu_item:nth-child(-n + 8) {
                    margin-bottom: 20px;
                }
            }

            .cust_qs {
                margin: 20px 0;
            }
        }
    }

    .r_side_bar {
        margin-left: 16px;
        width: 290px;

        .r_side_top {
            width: 100%;
            height: 238px;
            background-color: #fff;
            margin-bottom: 16px;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 1px;
            border: 1px solid #eaeaea;

            .company_name {
                display: flex;
                justify-content: space-between;

                .name_detail {
                    font-size: 18px;
                    font-weight: 500;
                    color: #33302d;
                    line-height: 24px;
                }

                .up_btn {
                    height: 30px;
                    background: #ff6b00;
                    border-radius: 4px;
                }
            }

            .compay_info {
                margin-top: 24px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .company_main {
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;

                    .mb16 {
                        display: flex;
                        margin-bottom: 16px;

                        .mb_title {
                            white-space: nowrap;
                        }
                    }

                    .compay_verison span {
                        color: #33302d;
                    }

                    .compay_version_name {
                        width: 80px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .company_bottom {
                margin-top: 15px;
                width: 251px;
                height: 68px;
                padding: 10px 0;
                box-sizing: border-box;
                background: #fffaf9;
                display: flex;

                .company_days {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    width: 50%;

                    &:first-child {
                        border-right: 1px solid #eaeaea;
                    }

                    .more_days {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;
                        margin-bottom: 12px;
                    }

                    .days {
                        font-size: 14px;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;

                        span {
                            font-size: 26px;
                            font-family: STHeitiSC-Light, STHeitiSC;
                            font-weight: 300;
                            color: #33302d;
                        }
                    }
                }
            }
        }

        .r_side_process {
            width: 100%;
            box-sizing: border-box;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #eaeaea;

            .process_tit {
                padding-bottom: 17px;
                font-size: 16px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                border-bottom: 1px solid #eaeaea;
            }

            .process_height {
                height: 500px;
            }

            .staff_active {
                margin-top: 10px;

                .staff_active_item {
                    display: flex;
                    padding-bottom: 12px;
                    margin-left: 7px;
                    border-left: 2px dashed #ffc69e;

                    .staff_icon {
                        .circle_icon {
                            float: left;
                            margin-left: -7px;
                            width: 8px;
                            height: 8px;
                            background: #fff;
                            border: 2px solid #ff6b00;
                            border-radius: 50%;
                        }
                    }

                    .staff_main {
                        font-size: 14px;
                        font-family: STHeitiSC-Medium, STHeitiSC;
                        font-weight: 500;
                        color: #33302d;
                        vertical-align: top;

                        .staff_do {
                            margin-bottom: 5px;

                            span {
                                color: #33302d;
                            }

                            .font_bold {
                                font-weight: 600;
                            }

                            .staff_name {
                                color: #ff6b00;
                            }
                        }

                        .staff_time {
                            margin-top: 6px;
                            font-size: 14px;
                            font-family: STHeitiSC-Light, STHeitiSC;
                            font-weight: 300;
                            color: #969696;
                            line-height: 14px;
                        }
                    }
                }
            }
        }
    }
}

.chart_line {
    height: 400px;
    width: 100%;
}

.no_data {
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .no_img {
        margin-left: 35px;
    }

    .emty_title {
        margin-top: 10px;
    }
}
</style>
